<template>
  <div class="other-login">
    <div style="margin: 20px 0; display: flex; justify-content: center">
      <div style="width: 60px; height: 1px; background: #ccc"></div>
      <span style="margin: 0 20px">第三方登录</span>
      <div style="width: 60px; height: 1px; background: #ccc"></div>
    </div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20%;
        box-sizing: border-box;
      "
    >
      <img src="../../../assets/wx.svg" alt="" @click="gotoQQ('wx')" width="40" />
      <img src="../../../assets/QQ.svg" alt="" @click="gotoQQ('qq')" width="40" />
      <img
        src="../../../assets/zfb.svg"
        alt=""
        @click="gotoQQ('alipay')"
        width="60"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import instance from "../../../http/index";
const gotoQQ = async (type: String) => {
  instance.defaults.baseURL = "";
  let res = await instance.get("/api", {
    params: {
      act: "login",
      appid: "3212", //需要去官网申请
      appkey: "b378e70fb7c65ebef7207cd8401f4bd4", //需要去官网申请
      type: type,
      redirect_uri: "http://127.0.0.1:5173/me", //回调地址,就是你登录成功之后进入到的页面
    }, //替换成你自己项目的前端路径就可以
  });
  console.log(11111);
  window.open(res.data.url, "_self");
  // localStorage.setItem("accessToken", "123123");
  // localStorage.setItem("refreshToken", "1123123133");
};
</script>

<style scoped lang="scss">
.other-login {
  margin-top: 60px;
}
</style>